<div>
    <el-card style="margin: 10px;">
        <el-row>
            <el-col :span="6">{{ruleForm.itemName}}</el-col>
            <el-col :span="6" v-html="defaultValue">{{ruleForm.defaultValue}}</el-col>
            <el-col :span="6">{{ruleForm.description}}</el-col>
            <el-col :span="6" v-html="resetBtn"></el-col>
        </el-row>
    </el-card>
    <el-card style="margin: 10px;">
        <el-row>
            <el-col :span="16">
                <el-form :model="ruleForm" action="/simpledevelop/system/config/build/down" method="post"
                         id="configForm"
                         :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="JS文件名" prop="fileName">
                        <el-input v-model="ruleForm.fileName" name="fileName" placeholder="TestConfig.js 或 TestConfig"
                                  clearable @keyup.enter.native="submitForm"></el-input>
                    </el-form-item>
                    <el-form-item label="itemName" prop="itemName">
                        <el-input v-model="ruleForm.itemName" name="itemName" placeholder="这是系统选项名"
                                  clearable @keyup.enter.native="submitForm"></el-input>
                    </el-form-item>
                    <el-form-item label="默认值" prop="defaultValue">
                        <el-input v-model="ruleForm.defaultValue" name="defaultValue" placeholder="这是默认值"
                                  clearable @keyup.enter.native="submitForm"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="description">
                        <el-input v-model="ruleForm.description" name="description" placeholder="默认值( 这是默认值 )"
                                  clearable @keyup.enter.native="submitForm"></el-input>
                    </el-form-item>
                    <el-row v-if="isCusConfigItem">
                        <el-col :span="12">
                            <el-form-item label="tabName" prop="tabNameCus">
                                <el-input v-model="ruleForm.tabNameCus" name="tabNameCus"
                                          clearable @keyup.enter.native="submitForm"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="groupName" prop="groupNameCus">
                                <el-input v-model="ruleForm.groupNameCus" name="groupNameCus"
                                          clearable @keyup.enter.native="submitForm"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-else>
                        <el-col :span="12">
                            <el-form-item label="tabName" prop="tabName">
                                <el-select v-model="ruleForm.tabName" placeholder="请选择系统选项标签" @change="changeTabName">
                                    <el-option value="">请选择</el-option>
                                    <el-option value="公共设置">公共设置</el-option>
                                    <el-option value="用户管理">用户管理</el-option>
                                    <el-option value="数据集">数据集</el-option>
                                    <el-option value="自助仪表盘">自助仪表盘</el-option>
                                    <el-option value="灵活分析|即席查询">灵活分析|即席查询</el-option>
                                    <el-option value="多维分析">多维分析</el-option>
                                    <el-option value="缓存">缓存</el-option>
                                    <el-option value="电子表格">电子表格</el-option>
                                    <el-option value="透视分析">透视分析</el-option>
                                    <!--                                <el-option value="引擎设置">引擎设置</el-option>-->
                                    <!--                                <el-option value="移动端">移动端</el-option>-->
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="groupName" prop="groupName">
                                <el-select v-model="ruleForm.groupName" placeholder="请选择系统选项组">
                                    <el-option value="">请选择</el-option>
                                    <el-option v-for="menu in selectMenu" :value="menu">{{menu}}</el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="项目路径" prop="path" v-if="isLocation">
                        <el-input v-model="ruleForm.path" name="path" clearable @keyup.enter.native="submitForm"></el-input>
                    </el-form-item>
                    <el-form-item label="扩展属性" prop="extendJson">
                        <el-input v-model="ruleForm.extendJson" name="extendJson" clearable @keyup.enter.native="submitForm"></el-input>
                    </el-form-item>
                    <el-form-item label="可勾选项" prop="type">
                        <el-checkbox-group v-model="ruleForm.configs">
                            <el-checkbox label="cusConfigItem" name="configs" @change="changeCusConfigItem">
                                自定义configItem
                            </el-checkbox>
                            <el-checkbox label="prefix" name="configs">
                                国际化拼接文件名作为前缀
                            </el-checkbox>
                            <el-checkbox label="cn" name="configs">
                                国际化带上原中文意思
                            </el-checkbox>
                            <el-checkbox label="location" name="configs" @change="changeisLocation">
                                本地模式
                            </el-checkbox>
                            <el-checkbox label="config" name="configs" v-if="isLocation">
                                自动注入configuration
                            </el-checkbox>
                            <el-checkbox label="propertis" name="configs" v-if="isLocation">
                                自动注入国际化
                            </el-checkbox>
                            <el-checkbox label="override" name="override">
                                重复覆盖
                            </el-checkbox>
                            <el-checkbox label="notInternet" name="notInternet">
                                断网模式
                            </el-checkbox>
                            <el-checkbox label="longValue" name="longValue">
                                LongValue
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="构建类型">
                        <el-radio-group v-model="ruleForm.type" @change="change">
                            <el-radio label="RADIO" name="type">单选</el-radio>
                            <el-radio label="INPUT" name="type">文本输入框</el-radio>
                            <el-radio label="SELECT" name="type">下拉框</el-radio>
                            <el-radio label="TEXT_AREA" name="type">文本域</el-radio>
                            <el-radio label="JUST_BUTTON" name="type">按钮</el-radio>
                            <el-radio label="NO_DEFAULT_VALUE_INPUT" name="type">无默认值文本输入框</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm">立即构建</el-button>
                        <el-button @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="7">
                <h3>使用说明</h3>
                使用 | 进行国际化命名<br>
                否则将会使用翻译后全部大写作为国际化的KEY<br>
                例：<br>
                &nbsp;&nbsp;&nbsp;&nbsp;输　入：TEST_CUSTOM|这是自定义<br>
                &nbsp;&nbsp;&nbsp;&nbsp;国际化：<span style="color: red">TEST_CUSTOM</span> = This is custom<br>
                &nbsp;&nbsp;&nbsp;&nbsp;输　入：这是自定义 <br>
                &nbsp;&nbsp;&nbsp;&nbsp;国际化：<span style="color: red">THIS_IS_CUSTOM</span> = This is custom<br>
                <br>
                dbkey 使用itemName的国际化命名 <span style="color: red">不会拼接文件名作为前缀</span><br>
                <br>
                单元框和下拉框 使用,区分多个值<br>
                <br>
                <span style="color: red">输入框和文本域中的值不会进行国际化</span><br>
            </el-col>
        </el-row>
    </el-card>
</div>